<template>
    <div>
        <h1>展示数据</h1>
        <div class="banner">
            <ul v-for="(item,index ) in imgList.data" :key='index'>
                <img :src="item.imgUrl" alt="">
                <li class="name">{{ item.name }}</li>
                <li class="data">{{ item.data }}</li>
            </ul>
        </div>
        <!-- <img src="../../assets/banner1.png" alt=""> -->
    </div>
</template>

<script>
import { banner_req } from "@/modeApi/banner.js";
    export default {
        data(){
            return{
                imgList:{},
            }          
        },
        mounted(){
            this.getBanner();
        },
        methods:{
            async getBanner(){
                const result = await banner_req({
                    method:'get',
                    url:'/home/banner',

                });
                console.log(result);
                if(result.status == 200){
                    this.imgList = result.data;
                }
                console.log(this.imgList.data);
            },
        },
    };
</script>

<style lang="scss" scoped>
.banner{
    display: flex;
    flex-wrap: wrap;
    ul{
        list-style: none;
        margin: 10px 10px;
        img{
            width: 100px;
            height: 150px;
        }
        .name{
            font-size: 14px;
        }
        .data{
            font-size: 12px;
            color: rgb(225, 225, 225);
        }
    }
}
</style>